<template>
  <div style="padding: 24px">
    <el-form label-suffix=":">
      <el-form-item label="用户">
        <el-select v-model="user" @change="getFlowList">
          <el-option value="test1" label="test1" />
          <el-option value="test2" label="test2" />
          <el-option value="test3" label="test3" />
        </el-select>
      </el-form-item>
    </el-form>

    <el-table :data="data" border>
      <el-table-column prop="workid" label="流程实例编号" align="center" />
      <el-table-column prop="fkFlow" label="流程编号" align="center" />
      <el-table-column prop="flowname" label="名称" align="center" />
      <el-table-column align="center" label="操作">
        <template slot-scope="{row}">
          <router-link :to="`${EnumRouter.vieFlowForm}?workId=${row.workid}&flowNo=${row.fkFlow}&user=${user}&edit=true`">
            <el-link :underline="false" type="primary" style="margin-left: 15px">查看</el-link>
          </router-link>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="text-align: center"
      :page-count="pageSize"
      :total="total"
      :current-page="page"
      @current-change="changePage"
    />
  </div>
</template>

<script>
  import { GetCompleteList } from '@/api/formManagement';
  import EnumRouter from '@/constants/EnumRouter';
  export default {
    name: 'CompleteFlowList',
    data() {
      return {
        data: [],
        user: 'test2',
        page: 1,
        pageSize: 10,
        total: 0
      };
    },
    computed: {
      EnumRouter: () => EnumRouter
    },
    mounted() {
      this.getFlowList();
    },
    methods: {
      getFlowList() {
        const params = { userNo: this.user, sysNo: '1001', page: this.page, size: this.pageSize };
        GetCompleteList(params).then(res => {
          const { size, total, current, records } = res.data;
          this.page = current;
          this.total = total;
          this.pageSize = size;
          this.data = records;
        }, err => {
          this.$message.error(err.message);
        });
      },
      changePage(page) {
        this.page = page;
        this.getFlowList();
      }
    }
  };
</script>

<style scoped>

</style>
